<template>
<div class="zt">
    <!-- 内容区导航 -->
    <div class="ZTnav">
        <div>
            <div class="ZTinpt">
                <span>摄像头序列号</span>
                <el-input placeholder="请输入" v-model="searchCondition.camSerialNo"></el-input>
            </div>
            <div class="ZTinpt">
                <span>设备类型</span>
                  <el-select v-model="searchCondition.camType" placeholder="请选择">
                        <el-option v-for="item in camTypeList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
            </div>

            <div class="ZTinpt">
                <span>安装位置</span>
                <el-select v-model="searchCondition.installPosition" placeholder="请选择">
                    <el-option v-for="item in installPosition" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="ZTinpt">
                <span>主机ID</span>
                <el-input placeholder="请输入" v-model="searchCondition.deviceId"></el-input>
            </div>
            <div class="ZTinpt">
                <span>IP地址及端口号</span>
                <el-input placeholder="请输入" v-model="searchCondition.hostIpPort"></el-input>
            </div>
            <div class="ZTinpt">
                <span>固件版本</span>
                <el-input placeholder="请输入" v-model="searchCondition.camVersion"></el-input>
            </div>

            <div class="ZTinpt">
                <span>传输协议</span>
                <el-select v-model="searchCondition.transportProtocal" placeholder="请选择">
                    <el-option v-for="item in protocalList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
    </div>
    <div class="ZTnav2">
        <div class="ZTinpt">
            <span>通道号</span>
            <el-input placeholder="请输入" v-model="searchCondition.channelNumber"></el-input>
        </div>
        <button @click="resetCondition">重置</button>
        <button @click="conditionSearch(1,numVal)">查询</button>
    </div>
    <!-- 内容区 -->
    <div class="ZTcontent">
        <div class="ZTinfo">
            <button @click="showdetail_xinzeng()">新增信息</button>
            <button @click="hide_pl()">批量导入</button>
        </div>
        <!-- el表格 -->
        <div class="sxtgl_table">
            <el-table :header-cell-style="{background:'#EBF1FC',color:'#606266'}" :data="cameraDetails" border stripe style="width: 100%">
                <el-table-column prop="id" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="camId" label="摄像头ID" width="100">
                    <template slot-scope="scope">
                        <div class="table_key" @click="showDetailPage(scope.row.camId)">
                            {{scope.row.camId}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="camName" label="摄像头名称" width="180">
                </el-table-column>
                <el-table-column prop="camType" label="设备类型">
                </el-table-column>
                <el-table-column prop="camSerialNo" label="摄像头序列号" width="140">
                </el-table-column>
                <el-table-column prop="camManufacturer" label="摄像头厂商" width="140">
                </el-table-column>
                <el-table-column prop="installPosition" label="安装位置">
                </el-table-column>
                <el-table-column prop="project" label="所属项目" width="120">
                    <template slot-scope="scope">
                        <el-tooltip :visible-arrow=false :open-delay=500 :offset=60 popper-class="pro-wrapper">
                            <span>
                                {{scope.row.project}}
                            </span>
                            <div slot="content">{{scope.row.project}}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="deviceId" label="主机ID">
                </el-table-column>
                <el-table-column prop="hostIpPort" label="IP地址及端口号" width="120">
                </el-table-column>
                <el-table-column prop="camVersion" label="固件版本" width="120">
                </el-table-column>
                <el-table-column prop="transportProtocal" label="传输协议">
                </el-table-column>
                <el-table-column prop="channelNumber" label="通道号">
                </el-table-column>
                <el-table-column prop="relationStatus" label="摄像头状态">
                    <template slot-scope="scope">
                        <span style="width:16px !important;height:16px !important; display:inline-block;" :class="scope.row.relationStatus == 393 ? 'isbind': scope.row.relationStatus == 392 ? 'notPut':'notbind'">

                        </span>
                        <span>
                            {{scope.row.relationStatus == 393 ? '已绑定': scope.row.relationStatus == 392 ? '未入库':'未绑定'}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="showdetail_bianji(scope.row.camId)" type="text" size="small">编辑</el-button>
                        <template>
                            <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' @confirm="deleteInfo(scope.row.camId)" icon="el-icon-info" icon-color="red" :title="'确定删除摄像头 '+scope.row.camId+' 吗？'">
                                <el-button slot="reference" type="text" size="small" style="color:#F9243D">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="ZTfooter">
            <span>共{{ infoTotal }}条</span>
            <el-select v-model="numVal" @change="pageTotalChange">
                <el-option v-for="item in num" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-pagination layout="prev, pager, next" :total="this.totalPage" :current-page="currenPage" :page-size="this.pageSize" @current-change="handleCurrentChange">
            </el-pagination>
            <div class="goPage">
                <span>前往</span>
                <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="pageNumber" placeholder="1"></el-input>
                <span>页</span>
                <el-button class="goPageBtn" type="goon" @click="goPage">确定</el-button>
            </div>
        </div>
    </div>
    <el-dialog :visible="isopen_pl" width="432px" :before-close="hide_pl" class="import_dialog">
        <div slot="title" class="import_header">
            <div class="import_title">批量导入</div>
            <!-- <span @click="hide_pl()"></span> -->
        </div>
        <div>
            <div class="plneicheng">
                <span></span>
                <div class="ssxm">
                    <span style="color:#F9243D">*</span><span>所属项目</span>
                    <el-select v-model="ssxmVal" placeholder="请选择" @change="changedisable">
                        <el-option v-for="item in ssxm" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <button @click="downloadTemplate">下载模板</button>
                </div>
                <el-upload ref="upload" class="upload-demo" drag action="" :http-request="uploadFile" :on-change="upchange" :before-upload="beforeAvatarUpload" list-type="text" :file-list="fileList" :disabled="changedis" :auto-upload="false" multiple>
                    <div class="upload-text">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload-text-b">将文件拖到此处，或点击上传</div>
                        <div class="el-upload-text">支持上传xsl/xlsx格式的Excel文件</div>
                    </div>
                </el-upload>

            </div>
        </div>
        <button class="cancel" @click="hide_pl">取消</button>
        <button class="confirm" @click="submitUpload">确定</button>
    </el-dialog>
    <el-form :inline="true" label-position="right" label-width="93px">
        <el-dialog :visible="detailShow" width="650px" :before-close="detailHide" class="cameraDetail">
            <div class="detail_header" slot="title">
                <div class="detail_title">{{detailCameraInfo.camId}}</div>
            </div>
            <div class="formItem">
                <el-form-item label="所属项目" span="2">
                    {{detailCameraInfo.proName}}
                </el-form-item>
                <el-form-item label="摄像头名称">
                    {{detailCameraInfo.camName}}
                </el-form-item>
                <el-form-item label="摄像头类型">
                    {{detailCameraInfo.camType}}
                </el-form-item>
                <el-form-item label="摄像头序列号">
                    {{detailCameraInfo.camSerialNo}}
                </el-form-item>
                <el-form-item label="MAC地址">
                    {{detailCameraInfo.camMac}}
                </el-form-item>
                <el-form-item label="摄像头厂商">
                    {{detailCameraInfo.camManuf}}
                </el-form-item>
                <el-form-item label="安装位置">
                    {{detailCameraInfo.installPosition}}
                </el-form-item>
                <el-form-item label="传输协议">
                    {{detailCameraInfo.transportProtocal}}
                </el-form-item>
                <el-form-item label="固件版本">
                    {{detailCameraInfo.camVersion}}
                </el-form-item>
                <el-form-item label="IP地址">
                    {{detailCameraInfo.hostIpPort}}
                </el-form-item>
                <el-form-item label="通道号">
                    {{detailCameraInfo.channelNumber}}
                </el-form-item>
                <el-form-item label="主机ID">
                    {{detailCameraInfo.deviceId}}
                </el-form-item>
            </div>

        </el-dialog>
    </el-form>
    <!-- 编辑 -->
    <el-dialog :visible="detailShow_bianji" width="700px" :before-close="cameraInfoEditCancel" ref="cameraInfo_edit">
        <div class="edit_header" slot="title">
            <div class="edit_title">编辑： {{editCameraInfo.camId == null ? "未命名摄像头":editCameraInfo.camId}}</div>
        </div>
        <el-form :inline="true" label-position="right" label-width="100px" :model="editCameraInfo" ref="editCameraInfo">
            <div class="formItem">
                <el-form-item label="主机ID">
                    <!-- <el-input v-model="editCameraInfo.deviceId"></el-input> -->
                    <el-select v-model="editCameraInfo.deviceId" filterable placeholder="请选择" @change="bindChange">
                        <el-option v-for="(deviceId,idx) in deviceIdList" :key="idx" :label="deviceId.label" :value="deviceId.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属项目">
                    <el-select disabled v-model="editCameraInfo.project" placeholder="请选择">
                        <el-option v-for="item in ssxm" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="摄像头名称">
                    <el-input v-model="editCameraInfo.camName"></el-input>
                </el-form-item>
                <el-form-item label="摄像头类型">
                    <el-select v-model="editCameraInfo.camType" placeholder="请选择">
                        <el-option v-for="item in camTypeList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="摄像头序列号">
                    <el-input v-model="editCameraInfo.camSerialNo"></el-input>
                </el-form-item>
                <el-form-item label="MAC地址">
                    <el-input v-model="editCameraInfo.camMac"></el-input>
                </el-form-item>
                <el-form-item label="摄像头厂商">
                    <el-input v-model="editCameraInfo.camManuf"></el-input>
                </el-form-item>
                <el-form-item label="安装位置">
                    <el-select v-model="editCameraInfo.installPosition" placeholder="请选择">
                        <el-option v-for="item in installPosition" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="传输协议">
                    <el-select v-model="editCameraInfo.transportProtocal" placeholder="请选择">
                        <el-option v-for="item in protocalList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="协议类型">
                    <el-input v-model="editCameraInfo.transportProtocal"></el-input>
                </el-form-item> -->
                <el-form-item label="固件版本">
                    <el-input v-model="editCameraInfo.camVersion"></el-input>
                </el-form-item>
                <el-form-item label="IP地址">
                    <el-input v-model="editCameraInfo.hostIpPort"></el-input>
                </el-form-item>
                <el-form-item label="通道号">
                    <el-input v-model="editCameraInfo.channelNumber"></el-input>
                </el-form-item>

            </div>
        </el-form>
        <div class="cameraInfo_add_button">
            <button class="edit_confirm" @click="cameraInfoEditConfirm('editCameraInfo')">确定</button>
            <button class="edit_cancel" @click="cameraInfoEditCancel()">取消</button>
        </div>
    </el-dialog>

    <!-- 新增 -->
    <el-form :inline="true" :rules="insertRule" label-position="right" label-width="105px" :model="insertCameraInfo" ref="insertCameraInfo">
        <el-dialog :visible="detailShow_xinzeng" width="720px" :before-close="cameraInsertCancel">
            <div slot="title">
                <el-form-item class="add_header" label="摄像头ID" prop="camId">
                    <el-input v-model="insertCameraInfo.camId" placeholder="请输入"></el-input>
                </el-form-item>
            </div>
            <div class="formItem">
                <el-form-item label="主机ID" prop="deviceId">
                    <el-select v-model="insertCameraInfo.deviceId" filterable placeholder="请选择" @change="bindChange">
                        <el-option v-for="(deviceId,idx) in deviceIdList" :key="idx" :label="deviceId.label" :value="deviceId.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属项目" class="form-item-project">
                    <el-select v-model="insertCameraInfo.project" disabled placeholder="请选择" @change="proChange">
                        <el-option v-for="item in ssxm" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="摄像头名称">
                    <el-input v-model="insertCameraInfo.camName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="摄像头类型" prop="camType">
                    <el-select v-model="insertCameraInfo.camType" placeholder="请选择">
                        <el-option v-for="item in camTypeList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="摄像头序列号">
                    <el-input v-model="insertCameraInfo.camSerialNo" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="安装位置" prop="installPosition">
                    <el-select v-model="insertCameraInfo.installPosition" placeholder="请选择">
                        <el-option v-for="item in installPosition" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="生产厂商">
                    <el-input v-model="insertCameraInfo.camManuf" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="传输协议" prop="transportProtocal">
                    <el-select v-model="insertCameraInfo.transportProtocal" placeholder="请选择">
                        <el-option v-for="item in protocalList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="协议类型">
                    <el-input v-model="insertCameraInfo.transportProtocal" placeholder="请输入"></el-input>
                </el-form-item> -->
                <el-form-item label="摄像头MAC">
                    <el-input v-model="insertCameraInfo.camMac" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="固件版本">
                    <el-input v-model="insertCameraInfo.camVersion" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="主机IP端口号">
                    <el-input v-model="insertCameraInfo.hostIpPort" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="通道号">
                    <el-input v-model="insertCameraInfo.channelNumber" placeholder="请输入"></el-input>
                </el-form-item>
            </div>
            <div class="cameraInfo_add_button">
                <el-button class="add_cancel" type="primary" @click="cameraInsertCancel">取消</el-button>
                <el-button class="add_confirm" @click="cameraInsertConfirm('insertCameraInfo')">新增入库</el-button>
            </div>
        </el-dialog>
    </el-form>
</div>
</template>

<script>
import AreaDivision from "../../static/area.js";

export default {

    data() {
        return {
            ssxm: [{
                value: 1,
                lable: "济南公交车载设备采购项目"
            }, ],
            num: [{
                    value: 20,
                    label: "20条/页",
                },
                {
                    value: 50,
                    label: "50条/页",
                },
                {
                    value: 100,
                    label: "100条/页",
                },
            ],
            value: "",
            numVal: 20,
            pageNumber: "",
            infoTotal: 100,
            currenPage: 1,
            totalPage: 100,
            pageSize: 10,
            cameraDetails: [],
            fileList: [],
            options: [],
            isopen: false,
            isopen_pl: false,
            isnew: false,
            isinfo: false,
            detailShow_bianji: false,
            detailShow_xinzeng: false,
            changedis: true,
            ssxm: [],
            ssxmVal: "",
            protocalList:[],
            transportProtocal:"",
            area: AreaDivision.arrAll,
            insertCameraInfo: {
                camId: "",
                camName: "",
                installPosition: "",
                camType: "",
                camSerialNo: "",
                project: "",
                deviceId: "",
                camManuf: "",
                transportProtocal: "",
                camMac: "",
                camVersion: "",
                hostIpPort: "",
                channelNumber: "",
                region: ""
            },
            insertRule: {
                project: [{
                    required: true,
                    message: '请选择所属项目',
                    trigger: 'change'
                }],
                camId: [{
                    required: true,
                    message: '请输入摄像头ID',
                    trigger: 'blur'
                }],
                camType: [{
                    required: true,
                    message: '请选择摄像头类型',
                    trigger: 'change'
                }],
                installPosition: [{
                    required: true,
                    message: '请选择安装位置',
                    trigger: 'change'
                }],
                deviceId: [{
                    required: true,
                    message: '请输入绑定设备ID',
                    trigger: 'change'
                }],
                transportProtocal: [{
                    required: true,
                    message: '请选择传输协议',
                    trigger: 'change'
                }]
            },

            detailShow: false,
            detailCameraInfo: {
                proName: "",
                camName: "",
                camType: "",
                camSerialNo: "",
                camMac: "",
                camManuf: "",
                installPosition: "",
                transportProtocal: "",
                camVersion: "",
                hostIpPort: "",
                channelNumber: "",
                deviceId: ""
            },
            searchCondition: {
                camSerialNo: "",
                camType: "",
                installPosition: "",
                deviceId: "",
                hostIpPort: "",
                camVersion: "",
                transportProtocal: "",
                channelNumber: ""
            },
            installPosition: [{
                label: "前",
                value: "前"
            }, {
                label: "中",
                value: "中"
            }, {
                label: "后",
                value: "后"
            }],
            camTypeList: [{
                label: "球形摄像机",
                value: "球形摄像机"
            }, {
                label: "摄像机枪",
                value: "摄像机枪",
            }],
            protocalList: [],
            editCameraInfo: {

            },
            deviceIdList: [],
        };
    },
    created() {
        this.changePageList(1, this.numVal);
        this.getProjectList();
        this.getDeviceIdList();
        this.getAllProtocal();
    },
    methods: {
        getProjectList() {
            let _this = this;
            _this.$axios
                .get("/project/getAll")
                .then((res) => {
                    res.data.data.forEach((pro) => {
                        _this.ssxm.push({
                            value: pro.pid,
                            label: pro.proName,
                        });
                    });
                })
                .catch();
        },
        getAllProtocal() {
            let _this = this;
            _this.$axios
                .get("/camera/getAllProTocal")
                .then((res) => {
                    let protocalList = res.data.data;
                    for (let i = 0; i < protocalList.length; i++) {
                        _this.protocalList.push({
                            label: protocalList[i],
                            value: protocalList[i]
                        });
                    }
                })
                .catch();
        },
        getDeviceIdList() {
            let _this = this;
            _this.$axios.get("device/getAllDeviceId")
                .then((res) => {
                    let deviceIdList = res.data.data;
                    for (let i = 0; i < deviceIdList.length; i++) {
                        _this.deviceIdList.push({
                            label: deviceIdList[i],
                            value: deviceIdList[i]
                        });
                    }

                }).catch((e) => {
                    console.log(e);
                })
        },
        bindChange(deviceId) {
            let _this = this;
            _this.$axios.get("device/getProByDI?deviceId=" + deviceId)
                .then((res) => {
                    let project = res.data.data;
                    _this.$set(_this.editCameraInfo,'project',project.pid);
                    _this.$set(_this.insertCameraInfo,'project',project.pid);
                    // _this.editCameraInfo.project = project.pid;
                    // _this.insertCameraInfo.project = project.pid;
                })

                .catch((e) => {
                    console.log(e);
                })
        },
        showDetailPage(cameraId) {
            let _this = this;
            _this.$axios.get("camera/detail?camId=" + cameraId)
                .then((res) => {
                    let cameraInfo = res.data.data;
                    _this.detailCameraInfo = {
                        camId: cameraInfo.camId,
                        proName: cameraInfo.proName,
                        camName: cameraInfo.camName,
                        camType: cameraInfo.camType,
                        camSerialNo: cameraInfo.camSerialNo,
                        camMac: cameraInfo.camMac,
                        camManuf: cameraInfo.camManuf,
                        installPosition: cameraInfo.installPosition,
                        transportProtocal: cameraInfo.transportProtocal,
                        camVersion: cameraInfo.camVersion,
                        hostIpPort: cameraInfo.hostIpPort,
                        channelNumber: cameraInfo.channelNumber,
                        deviceId: cameraInfo.deviceId
                    };
                    _this.detailShow = true;
                })
                .catch()

        },
        resetCondition() {
            let _this = this;
            _this.searchCondition = {
                camSerialNo: "",
                camType: "",
                installPosition: "",
                deviceId: "",
                hostIpPort: "",
                camVersion: "",
                transportProtocal: "",
                channelNumber: ""
            };
            _this.changePageList(1, _this.numVal);
        },
        conditionSearch(page, limit) {
            let _this = this;
            _this.$axios
                .post("/camera/condition/" + page + "/" + limit, _this.searchCondition)
                .then((res) => {
                    let data = res.data.data;
                    let records = data.records;
                    _this.infoTotal = data.total;
                    _this.totalPage = _this.infoTotal;
                    _this.pageSize = _this.numVal;
                    _this.cameraDetails = [];
                    for (let i = 0; i < records.length; i++) {
                        let camera = records[i];
                        this.cameraDetails.push({
                            id: (page - 1) * limit + 1 + i,
                            camId: camera.camId,
                            camName: camera.camName,
                            camType: camera.camType,
                            camSerialNo: camera.camSerialNo,
                            camManufacturer: camera.camManuf,
                            project: camera.proName,
                            installPosition: camera.installPosition,
                            deviceId: camera.deviceId,
                            hostIpPort: camera.hostIpPort,
                            camVersion: camera.camVersion,
                            channelNumber: camera.channelNumber,
                            transportProtocal: camera.transportProtocal,
                            relationStatus: camera.relationStatus
                        });
                    }

                    //
                })
                .catch();
        },
        deleteInfo(camId) {
            let _this = this;
            _this.$axios.post("camera/delete", {
                camId: camId
            }).then((res) => {
                let code = res.data.code;
                if (code == 2) {
                    _this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    _this.changePageList(1, _this.numVal);
                } else if (code == 3) {
                    _this.$message.error(res.data.msg);
                }

            }).catch((e) => {
                console.log(e)
            })
        },
        detailHide() {
            let _this = this;
            this.$confirm('确认关闭详情信息？')
                .then(e => {
                    _this.detailShow = false;
                })
                .catch(e => {});

        },
        cameraInfoEditConfirm(formName) {
            let _this = this;
            _this.$refs[formName].validate((valid) => {
                if (valid) {
                    _this.$axios.post("camera/edit", _this.editCameraInfo)
                        .then((res) => {
                            let code = res.data.code;
                            if (code == 2) {
                                _this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                _this.detailShow_bianji = false;
                                _this.changePageList(1, _this.numVal);
                            } else if (code == 3) {
                                _this.$message.error(res.data.msg);
                            }

                        }).catch()
                } else {
                    return false;
                }
            })
        },
        cameraInfoEditCancel(formName) {

            let _this = this;
            this.$confirm('确认不保存信息关闭？')
                .then(e => {
                    _this.detailShow_bianji = false;
                    _this.$refs['editCameraInfo'].resetFields();
                    done();
                })
                .catch(e => {});
        },
        showdetail_bianji(cameraId) {
            let _this = this;
            _this.editCameraInfo = {};
            _this.$axios.get("camera/detail?camId=" + cameraId)
                .then((res) => {
                    let cameraInfo = res.data.data;
                    _this.editCameraInfo = {
                        camId: cameraInfo.camId,
                        project: cameraInfo.proId,
                        proName: cameraInfo.proName,
                        camName: cameraInfo.camName,
                        camType: cameraInfo.camType,
                        camSerialNo: cameraInfo.camSerialNo,
                        camMac: cameraInfo.camMac,
                        camManuf: cameraInfo.camManuf,
                        installPosition: cameraInfo.installPosition,
                        transportProtocal: cameraInfo.transportProtocal,
                        camVersion: cameraInfo.camVersion,
                        hostIpPort: cameraInfo.hostIpPort,
                        channelNumber: cameraInfo.channelNumber,
                        deviceId: cameraInfo.deviceId,
                    };
                    _this.detailShow_bianji = true;

                })
                .catch()

        },
        showdetail_xinzeng() {
            let _this = this;
            _this.insertCameraInfo = {};
            _this.detailShow_xinzeng = true;
        },
        detailHide_xinzeng() {
            let _this = this;
            _this.detailShow_xinzeng = false;
        },
        cameraInsertConfirm(formName) {
            let _this = this;
            _this.$refs[formName].validate((valid) => {
                if (valid) {
                    _this.$axios.post("camera/add", _this.insertCameraInfo)
                        .then((res) => {
                            let code = res.data.code;
                            if (code == 2) {
                                _this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                _this.detailShow_xinzeng = false;
                                _this.changePageList(1, _this.numVal);
                            } else if (code == 3) {
                                _this.$message.error(res.data.msg);
                            }
                        }).catch()
                } else {
                    return false;
                }
            })
        },
        cameraInsertCancel() {
            let _this = this;
            this.$confirm('确认不保存信息关闭？')
                .then(e => {
                    _this.detailShow_xinzeng = false;
                    _this.$refs['insertCameraInfo'].resetFields();
                    done();
                })
                .catch(e => {});
        },
        proChange(pro) {
            let _this = this;
            _this.$axios.get("/project/getByPid?pid=" + pro)
                .then((res) => {
                    let project = res.data.data;
                    let cityCode = parseInt(project.cityCode);
                    let provinceCode = parseInt(project.provinceCode);
                    _this.insertCameraInfo.region =
                        provinceCode == cityCode ? [cityCode] : [provinceCode, cityCode]
                }).catch((e) => {
                    _this.$message.error(e);
                })
        },
        downloadTemplate() {
            let _this = this;
            _this.$axios({
                    url: "/camera/download",
                    responseType: 'blob',
                    method: 'get'
                })
                .then((res) => {
                    const filename = res.headers["content-disposition"];
                    const blob = new Blob([res.data]);
                    var downloadElement = document.createElement("a");
                    var href = window.URL.createObjectURL(blob);
                    downloadElement.href = href;
                    // downloadElement.download = decodeURIComponent(filename.split("filename=")[1]);
                    downloadElement.download = decodeURIComponent("摄像头信息模板.xlsx");
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(href);
                }).catch((e) => {
                    console.log("下载失败");
                })
        },
        uploadFile(params) {
            let _this = this;
            let fd = new FormData();
            fd.append('file', params.file);
            fd.append('proId', _this.ssxmVal)
            _this.$axios.post("camera/import", fd).then((res) => {
                let code = res.data.code;
                if (code == 3) {
                    _this.$message.error(res.data.msg)
                } else if (code == 2) {
                    _this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    //关闭弹窗  刷新页面数据  清除批量导入数据
                    _this.isopen_pl =false;
                    _this.changePageList(1, this.numVal);
                    _this.fileList = [];
                }
            }).catch()
        },
        // 文件上传禁用
        changedisable() {
            this.changedis = false;
        },
        submitUpload() {
            let _this = this;
            _this.$refs.upload.submit();
        },
        // 批量导入自定义样式
        upchange(file, filelist) {
            var xiaoshi = document.querySelector('.el-upload-dragger');
            xiaoshi.style.height = "50px";
            var xiaoshitextb = document.querySelector('.el-upload-text-b');
            xiaoshitextb.innerHTML = "上传文件";
            var xiaoshitext = document.querySelector('.el-upload-text');
            xiaoshitext.style.display = 'none';
            var xiaoshiicon = document.querySelector('.el-icon-upload');
            xiaoshiicon.style.position = 'relative';
            xiaoshiicon.style.right = '60px';
            xiaoshiicon.style.top = '22px';
            var textlist = document.querySelector('.el-upload-list');
            textlist.style.border = '3px solid rgba(226,226,226)';
            textlist.style.borderRadius = '5px';
            textlist.style.height = '150px';
            textlist.style.background = 'rgb(249,249,249)';
            var cancel = document.querySelector('.cancel');
            cancel.style.display = "block"
            var confirm = document.querySelector('.confirm');
            confirm.style.display = "block"
        },
        beforeAvatarUpload(file) {
            const isText = file.type === 'application/vnd.ms-excel';
            const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
            if (!isText && !isTextComputer) {
                this.$message.warning('请上传excel格式文件！');
            };
            return (isText || isTextComputer);
        },
        hide() {
            let _this = this;
            _this.isopen = !_this.isopen
        },
        hide_pl() {
            let _this = this;
            _this.fileList = [];
            _this.ssxmVal = null;
            _this.isopen_pl = !_this.isopen_pl
        },
        // 隐藏主机ID信息表单
        hide_info() {
            let _this = this;
            _this.isinfo = !_this.isinfo;
        },
        // 显示入库表单 同时隐藏新增信息表单
        newhide() {
            let _this = this;
            _this.isnew = !_this.isnew;
            _this.isopen = !_this.isopen;
        },
        // 隐藏入库表单
        quxiaohide() {
            let _this = this;
            _this.isnew = !_this.isnew;
        },
        handleCurrentChange(val) {
            this.currenPage = val;
            this.changePageList(val, this.numVal);
        },
        pageTotalChange(val) {
            this.totalPage = Math.ceil(this.infoTotal / val);

            this.changePageList(1, val);
        },
        pageReset() {
            this.changePageList(this.currenPage, this.numVal);
        },
        goPage(){
        // console.log("this.totalPage",this.totalPage,this.pageSize,this.pageNumber,this.currenPage);
        if(this.totalPage<=this.pageSize){
          this.pageNumber =  this.currenPage = 1;
        }else{
          //判断一共有多少页
          let page = Math.ceil(this.totalPage/this.pageSize);
          this.pageNumber = this.pageNumber>page?page:this.pageNumber;
          this.currenPage = Number(this.pageNumber) ;
          }
          this.conditionSearch(this.pageNumber,this.numVal)
        },
        changePageList(page, limit) {
            this.$axios
                .get("/camera/page/" + page + "/" + limit)
                .then((res) => {
                    let data = res.data.data;
                    let records = data.records;
                    this.infoTotal = data.total;
                    this.totalPage = this.infoTotal;
                    this.pageSize = this.numVal;
                    this.cameraDetails = [];
                    for (let i = 0; i < records.length; i++) {
                        let camera = records[i];
                        this.cameraDetails.push({
                            id: (page - 1) * limit + 1 + i,
                            camId: camera.camId,
                            camName: camera.camName,
                            camType: camera.camType,
                            camSerialNo: camera.camSerialNo,
                            camManufacturer: camera.camManuf,
                            project: camera.proName,
                            installPosition: camera.installPosition,
                            deviceId: camera.deviceId,
                            hostIpPort: camera.hostIpPort,
                            camVersion: camera.camVersion,
                            channelNumber: camera.channelNumber,
                            transportProtocal: camera.transportProtocal,
                            relationStatus: camera.relationStatus
                        });
                    }

                    //
                })
                .catch();
        },
    },
};
</script>

<style lang="scss">
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: rgba(1, 1, 1, 0) !important;
}

.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
    border-bottom-color: rgba(1, 1, 1, 0) !important;
}

.pro-wrapper {
    width: 290px;
    height: auto;
    font-size: 14px;
    border-radius: 4px !important;
    font-family: "Micrisoft Yahei";
    font-weight: 400;
    word-wrap: break-word;
    color: white;
    background: rgba(0, 0, 0, 0.8) !important;
    box-shadow: 1px 1px 10px 3px #D3D3D6;
}
</style><style lang="scss">
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: rgba(1, 1, 1, 0) !important;
}

.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
    border-bottom-color: rgba(1, 1, 1, 0) !important;
}

.testtooltip {
    width: 290px;
    height: auto;
    font-size: 14px;
    border-radius: 4px !important;
    font-family: "Micrisoft Yahei";
    font-weight: 400;

    word-wrap: break-word;
    background: rgba(0, 0, 0, 0.8) !important;
    box-shadow: 1px 1px 10px 3px #D3D3D6;
}
</style><style scoped>
/* 内容区底部样式 */
.goPage>button:hover {
    cursor: pointer;
}

.goPage>button {
    width: 60px;
    height: 30px;
    background: #3c74e3;
    border-radius: 4px;
    border: none;
    color: #ffffff;
}

.goPage>span:nth-of-type(2) {
    padding-left: 48px;
    padding-right: 8px;
}

.goPage>span:nth-of-type(1) {
    padding-right: 8px;
}

.ZTfooter>.goPage {
    position: absolute;
    right: 10px;
    top: 10px;
}

.goPage>>>.el-input {
    width: 0 !important;
}

.goPage>.el-input>>>.el-input__inner {
    width: 40px !important;
    height: 30px !important;
    padding: 0 5px !important;
}

.el-pagination {
    position: absolute;
    right: 190px;
    top: 10px;
}

.ZTfooter>.el-select>>>.el-input__icon {
    line-height: 30px !important;
}

.ZTfooter>.el-select>>>.el-input__inner {
    width: 100px;
    height: 30px;
}

.ZTfooter>span:nth-of-type(1) {
    margin-right: 16px;
}

.ZTfooter {
    height: 44px;
    display: flex;
    align-items: center;
    border-top: 1px solid #cccccc;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    padding: 0 16px;
    margin-top: 4px;
    position: relative;
}

.ZT_bg {
    background: #f5f5f5;
}

.online {
    background: url(/static/img/online.png) no-repeat;
    background-size: 15px;
    color: #16a951;
    background-position: 12px 3px;
}

.offline {
    background: url(/static/img/off-line.png) no-repeat;
    background-size: 15px;
    background-position: 12px 3px;
}

/* 设备状态表格 */
.ZTcontent {
    height: calc(100% - 60px);
    background-color: #fff;
    margin-top: 8px;
    padding: 16px 16px 0 16px;
    box-sizing: border-box;
}

.ZTnav2 {
    width: 100%;
    height: 100px;
    background-color: white;
}

/* 查询按钮 */
.ZTnav2 button:nth-of-type(2) {
    color: #fff;
    background: url(/static/img/serch.png) no-repeat #3c74e3;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

.ZTnav2 button:nth-of-type(1) {
    background: url(/static/img/sx.png) no-repeat #fff;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

.ZTnav2 button {
    float: right;
    width: 80px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    margin: 40px 8px 16px 8px;
    padding-left: 26px;
    box-sizing: border-box;
    font-size: 14px;
    cursor: pointer;
}

/* 输入搜索框 */
.el-select>>>.el-input__icon {
    line-height: 36px !important;
}

.el-select>>>.el-input__inner,
.el-input>>>.el-input__inner {
    width: 200px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding-left: 8px;
    box-sizing: border-box;
}

.ZTinpt>span {
    float: left;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.6);
}

.ZTinpt {
    width: 198px;
    padding-left: 16px;
    margin-top: 12px;
    float: left;
}

/* 内容导航区 */
.ZTnav {
    width: 100%;
    height: 80px;
    background-color: #fff;
    margin-top: 2px;
    margin-right: 8px;
}

.zt {
    height: calc(100% - 177px);
}

.ZTinfo {
    position: relative;
    height: 48px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    display: flex;
    align-items: center;
}

.ZTinfo button {
    float: right;
    width: 100px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding-left: 26px;
    box-sizing: border-box;
    font-size: 14px;
    cursor: pointer;
}

.ZTinfo button:nth-of-type(2) {
    position: absolute;
    right: 0px;
    bottom: 16px;
    background: url(/static/img/daoru.png) no-repeat #fff;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

.ZTinfo button:nth-of-type(1) {
    position: absolute;
    right: 116px;
    bottom: 16px;
    color: #fff;
    background: url(/static/img/xinzeng.png) no-repeat #3c74e3;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

/deep/ .el-dialog__header {
    padding: 0;
    transition: all .5s ease-in-out;
}

/deep/ .el-dialog {
    border-radius: 8px;
}

/deep/ .el-dialog__body {
    padding-top: 0;
}

/* 摄像头详情 */

.detail_header {
    height: 48px;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
    display: flex;
    /* margin-bottom: 20px; */
}

.detail_header .detail_title {
    position: relative;
    font-size: 16px;
    left: 20px;
    color: rgba(0, 0, 0, 0.88);
    font-family: Arial;
    font-weight: bold;
}

.cameraDetail .formItem {
    width: 100%;
    position: relative;
    /* right: 40px; */

}

.cameraDetail>>>.el-form-item {
    margin: 16px 0 0 0 !important;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;

}

.cameraDetail>>>.el-form-item__label {
    font-weight: 400;
    color: #666666;
    padding-right: 8px;
    height: 36px;
}

.cameraDetail>>>.el-form-item__content {
    background-color: #EEEEEE;
    width: 192px;
    height: 36px;
    color: #000000;
    border-radius: 4px;
    padding-left: 8px;
}

.cameraDetail .modify-history {
    position: relative;
    top: 40px;
    left: 40px;
}

.modify-history .mod-tag {
    border-left: 2px solid #3C74E3;
    margin: 3px 8px 3px 1px;
    height: 20px;
    display: inline;
}

.modify-history .mod-title {
    width: 56px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.88);
    display: inline;
}

.mod-record {
    position: relative;
    top: 8px;
    background-color: red;
    width: 550px;
    height: 83px;
}

/* ------------------------------------- */
/* ----------编辑---------------------- */

.edit_header {
    height: 48px;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
    display: flex;
    /* margin-bottom: 20px; */
}

.edit_header .edit_title {
    position: relative;
    font-size: 16px;
    left: 20px;

    color: #303133;
    font-family: Arial;
    font-weight: bold;
}

.cameraInfo_edit .formItem {
    width: 100%;
    position: relative;
    left: 0px;
    top: 13px;
}

.cameraInfo_edit>>>.el-form-item__label {
    font-weight: 400;
    color: #666666;
    padding-right: 8px;
    height: 36px;
}

.cameraInfo_edit>>>.el-form-item__content {
    width: 192px;
    height: 36px;
    color: #000000;
    padding-left: 8px;
}

.cameraInfo_edit>>>.more_edit {
    /* margin-top: 20px; */

    position: absolute;
    bottom: 64px;
    left: calc(50% - 24px);

}

.more_edit>>>i {
    font-size: 32px;
    /* background-size: 64px 32px; */
    margin-top: -10px;
    cursor: pointer;
}

.edit_cancel {
    text-align: center;
    width: 120px;
    height: 36px;
    color: #3C74E3;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 20px;
    left: 354px;
}

.edit_confirm {
    text-align: center;
    width: 120px;
    height: 36px;
    color: #FFFFFF;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #3C74E3;
    position: absolute;
    bottom: 20px;
    right: 40px;
}

/* 新增摄像头信息 */
.cameraInfo_add {
    width: 650px;
    height: 521px;
    background: #fff;
    position: fixed;
    left: 35%;
    top: 25%;
    z-index: 999;
    /* border: 1px solid #000;*/
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5) !important;
}

.add_header {
    height: 48px !important;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
    display: flex !important;
    width: 100%;
}

.add_header>>>.el-form-item__label {
    position: relative;
    font-size: 14px;
    width: auto;
    left: 13px;
    color: #666666;
    font-weight: 400;
    width: 90px !important;
    margin-right: 13px;
}

.add_header>.el-input {
    position: relative;
    left: 27px;
    width: 200px;
}

.cameraInfo_add .formItem {
    width: 100%;
    position: relative;
    left: 13px;
}

.cameraInfo_add>>>.el-form-item__label {
    font-weight: 400;
    color: #666666;
    padding-right: 8px;
    height: 36px;
}

.cameraInfo_add>>>.el-form-item {
    margin: 0 0 16px 0 !important;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    height: 36px;
}

.form-item-project .el-select {
    width: auto;
}

.form-item-project>>>.el-input__inner,
.form-item-project>>>.el-textarea__inner {
    width: 200px !important;
}

.cameraInfo_add .formItem>>>.el-cascader {
    width: auto !important;
}

.cameraInfo_add .formItem>>>.el-cascader .el-input__inner {
    width: 200px !important;
}

.add_cancel {
    text-align: center;
    width: 120px;
    height: 36px;
    color: #3C74E3;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 20px;
    left: 354px;
}

.add_confirm {
    text-align: center;
    width: 120px;
    height: 36px;
    color: #FFFFFF;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #3C74E3;
    position: absolute;
    bottom: 20px;
    right: 40px;
}

.cameraInfo_add_button {
    margin-top: 20px;
    justify-content: space-around;
    display: flex;
    align-items: center;
}

/* ------------------------ */
/* 上传文件后的列表格式 */

/* 批量管理 */

.import_dialog>>>.cancel {
    position: absolute;
    width: 80px;
    height: 36px;
    background: white;
    border-radius: 4px;
    border-width: 1px;
    border-color: #3c74e3;
    /* border: none; */
    color: #3C74E3;
    font-size: 14px;
    right: 116px;
    bottom: 20px;
    display: none;
}

.import_dialog>>>.confirm {
    position: absolute;
    width: 80px;
    height: 36px;
    background: #3c74e3;
    border-radius: 4px;
    border: none;
    color: #ffffff;
    font-size: 14px;
    right: 20px;
    bottom: 20px;
    display: none;
}

.import_header {
    height: 48px;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
    display: flex;
    /* margin-bottom: 20px; */
}

.import_header .import_title {
    position: relative;
    font-size: 16px;
    left: 20px;
    color: rgba(0, 0, 0, 0.88);
    font-family: Arial;
    font-weight: bold;
}

/deep/ .el-upload-dragger {
    top: -10px;
    width: 352px;
    height: 234px;
}

/deep/ .upload-text {
    position: relative;
    top: calc(50% - 40px);
    left: calc(50% - 141px);
    height: 80px;
    width: 282px;
}

/deep/ .el-upload-text-b,
/deep/ .el-icon-upload {
    color: #3C74E3 !important;
}

/deep/ .el-icon-upload {
    line-height: 32px !important;
    margin: 0px !important;
    font-size: 32px !important;
}

/deep/ .el-upload-text-b {
    top: 8px;
    font-size: 14px !important;
    font-family: "PingFang SC";
}

/deep/ .el-upload-text {
    font-size: 12px !important;
    color: rgba(0, 0, 0, 0.4);
}

/deep/ .el-form-item__label:before {
    margin: 0 !important;
    color: #F9243D !important;
}

/deep/ .el-form-item__error {
    color: #F9243D;
    font-size: 6px;
    line-height: 0.1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
}

.upload-demo /deep/ .el-upload-list__item {
    font-size: 22px;
    background: rgb(249, 249, 249);
    border-bottom: 3px solid rgba(226, 226, 226);
    position: relative;
    top: -10px;
}

.piliang:hover {
    display: block;
}

.piliang>div:nth-child(1) {
    height: 48px;
    font-size: 16px;
    padding-left: 20px;
    font-family: "PingFang SC";
    font-weight: 600;
    color: rgba(0, 0, 0, 0.88);
    line-height: 48px;
    align-items: center;
    background-color: #f5f5f5;
}

.piliang>div:nth-child(1)>span:nth-child(2) {
    position: absolute;
    background: url(/static/img/close.png) no-repeat;
    width: 16px;
    height: 16px;
    right: 20px;
    top: 18px;
    cursor: pointer;
}

.piliang>div>span:nth-child(2) {
    background: url(/static/img/piliang.png) no-repeat;
    background-size: 32px 23.97px;
    background-position: 32px 32px;
}

.plneicheng {
    margin: 20px;
    width: 352px;
    height: 282px;
    /* border: #dddddd dashed 1px; */
    position: relative;
}

.ssxm {
    margin-bottom: 20px;
}

.ssxm button {
    text-align: center;
    position: relative;
    left: 8px;
    width: 64px;
    height: 32px;
    color: #FFFFFF;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    background-color: #3C74E3;
}

.sptext_first {
    visibility: hidden;
    width: 296px;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 0;

    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}

.ZT_row>span:nth-child(5) .sptext_first {
    visibility: hidden;
    width: 296px;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 28%;
    margin-left: -60px;
}

.ZT_row>span:hover .sptext_first {
    visibility: visible;
}

.quxiao {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 20px;
    right: 16px;
    background: url(/static/img/close_b.png) no-repeat;
    background-size: 16px;
    cursor: pointer;
}

/* 横线 */
.link_top {
    position: absolute;
    width: 90%;
    height: 1px;
    border-top: solid rgb(170, 170, 170) 1px;
    top: 9%;
    left: 4%;
}

.link_down {
    position: absolute;
    width: 90%;
    height: 1px;
    border-top: solid rgb(170, 170, 170) 1px;
    bottom: 40%;
    left: 4%;
}

button {
    cursor: pointer;
}

.edit_header {
    height: 48px;
    background-color: #F5F5F5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    align-items: center;
    display: flex;
    margin-bottom: 20pxz;
}

.edit_header div {
    position: relative;
    font-size: 16px;
    left: 24px;
    color: #303133;
    font-weight: 700;
}

/* 摄像头信息编辑 */
.cameraDetail_bianji {
    width: 40%;
    height: 400px;
    background: #fff;
    position: fixed;
    left: 30%;
    top: 25%;
    z-index: 999;
    /* border: 1px solid #000;*/
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5) !important;
}

.cameraDetail_xinzeng_an {
    position: relative;
    top: 90px;
    justify-content: space-around;
    display: flex;
    align-items: center;
}

/* el table */
.sxtgl_table {
    height: calc(100% - 102px);
    overflow-y: scroll;
}

/* 滚动条样式 */
.sxtgl_table::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.sxtgl_table::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #3c74e3;
}

.sxtgl_table::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #f5f5f5;
}

.sxtgl_table>>>.table_key {
    color: #3C74E3;
    cursor: pointer;
}

.sxtgl_table .isbind {
    background: url(../../static/img/393.png) no-repeat;
    background-size: 15px;
    color: #16a951;
    background-position: 0px 3px;
}

.sxtgl_table .notbind {
    background: url(../../static/img/391.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

.sxtgl_table .notPut {
    background: url(../../static/img/392.png) no-repeat;
    background-size: 15px;
    background-position: 0px 3px;
}

/deep/ .el-table th.el-table__cell.is-leaf,
/deep/ .el-table td.el-table__cell {
    border: none !important;
}

/deep/ .el-table th {
    padding: 0 !important;
    height: 48px !important;

}

/deep/ .el-table th.el-table__cell.is-leaf .cell {
    line-height: 32px;
    border-left: 1px solid #cccccc !important;
}

/deep/ .el-table .el-table__row td {
    padding: 0 !important;
    height: 40px;
}

/deep/ .el-table .el-table__row td div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/deep/ .el-table th:nth-child(1).el-table__cell.is-leaf .cell {
    border: none !important;
}

/deep/ .el-table--border,
.el-table--group {
    border: none;
}

/deep/ .el-table .el-table__row--striped td {
    background-color: #f5f5f5 !important;
}
</style>
